﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductDetail.aspx.cs" Inherits="EarringsRecommendationWeb.ProductDetail" %>

<!DOCTYPE html>

<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Product Detail</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-theme.css" rel="stylesheet">
    <!-- Demo CSS -->
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootbox.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#form-nav-bar').load('navbar.html');
            $.getScript("js/Login.js", function () { });
        });

    </script>
    <script src="js/toast.js" type="text/javascript"></script>

    <!-- Modernizr -->
    <script src="js/modernizr.js" type="text/javascript"></script>


</head>
<body>
    <div class="alert alert-success" role="alert" style="display: none; z-index: 1000; position: absolute; left: 0px; top: 50px;">
        <span>populate alert</span>
    </div>
    <!-- Navigation -->
    <nav id="form-nav-bar" class="navbar navbar-inverse navbar-static-top" role="navigation">
        <!-- /.container -->
    </nav>
    <form runat="server">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div id="main" role="main">
                        <section class="slider">
                            <div id="slider" class="flexslider">
                                <ul id="the-slider" class="slides">
                                </ul>
                            </div>
                            <div id="carousel" class="flexslider">
                                <ul id="the-carousel" class="slides">
                                </ul>
                            </div>
                        </section>
                    </div>

                    <!-- container -->
                </div>
                <div class="col-md-8">
                    <div class="row">
                        <h2 id="product-name" class="featurette-heading">And lastly, this one.</h2>

                        <div class="row">
                            <div class="col-md-2">
                                <p class="pull-right text-muted" style="font-size:20px;">ราคา :</p>
                            </div>
                            <div class="col-md-4">
                                <p><strong><span id="product-price" style="font-size:20px;" class="text-muted">Checkmate.</span></strong></p>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <h4 class="pull-right">จำนวน :</h4>
                            </div>
                            <div class="col-md-2">
                                <input type="number" min="1" id="txt-product-qty" class="form-control" value="1">
                            </div>
                            <div class="col-md-2">
                                <a id="btn-buy-now" class="glyphicon glyphicon-shopping-cart btn btn-primary" href="#" role="button"><span class="thai-font">สั่งซื้อ</span></a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <h4 class="pull-right">สี :</h4>
                            </div>
                            <div class="col-md-4">
                                <div id="er-color" style="padding-top: 6px;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <h4 class="pull-right">สถานะสินค้า :</h4>
                            </div>
                            <div class="col-md-2">
                                <h4 class="pull-left" id="earring-status"></h4>
                            </div>
                        </div>

                        <input type="text" id="txt-product-price" class="hidden">
                        <input type="text" id="txt-product-code" class="hidden">
                        <br />
                        <div class="panel panel-default">
                            <div class="panel-heading">รายละเอียด</div>
                            <div class="panel-body">
                                <p id="product-detail"></p>
                                <div>
                                    <strong>Earring Type:</strong> Drop Earrings
                                    <br />
                                    <strong>Gender:</strong> For Women
                                    <br />
                                    <strong>Material:</strong> Rhinestone
                                    <br />
                                    <strong>Metal Type:</strong> Lead-tin Alloy
                                    <br />
                                    <strong>Style:</strong> Trendy
                                    <br />
                                    <strong>Shape/Pattern:</strong> Water Drop
                                    <br />
                                    <strong>Length:</strong> 4.6CM
                                    <br />
                                    <strong>Weight:</strong> 0.05KG
                                    <br />
                                    <strong>Package:</strong> 1 x Earring(Pair)
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <!-- /.container -->
        <div class="container">
            <hr>
            <!-- Footer -->
            <footer>
                <div class="row">
                    <div class="col-lg-12">
                        <p>
                            Copyright &copy; Your Website 2015
                        </p>
                    </div>
                </div>
            </footer>
        </div>
        <!-- /.container -->
    </form>

    <script type="text/javascript" src="js/jquery.flexslider.js"></script>

    <!-- Optional FlexSlider Additions -->
    <script src="js/jquery.easing.js"></script>
    <script src="js/jquery.mousewheel.js"></script>
    <script src="js/demo.js"></script>
    <script type="text/javascript">
        Number.prototype.formatMoney = function (c, d, t) {
            var n = this,
                c = isNaN(c = Math.abs(c)) ? 2 : c,
                d = d == undefined ? "." : d,
                t = t == undefined ? "," : t,
                s = n < 0 ? "-" : "",
                i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
                j = (j = i.length) > 3 ? j % 3 : 0;
            return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
        }

        $(window).load(function () {

            if (typeof Earrings != 'undefined') {
                if (Earrings) {
                    getEarringsData();
                    getEarringsColor();
                }
            } else {
                return;
            }
           
            setTimeout(function () { displayItemQuantity(); }, 1000);
        });

        var optionSlider = {
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel"
        };
        var optionCarousel = {
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 120,
            itemMargin: 5,
            asNavFor: '#slider'
        };
        function setCarousel() {
            $.flexslider($('#carousel'), optionCarousel);
            $.flexslider($('#slider'), optionSlider);
            $('#carousel').flexslider(optionCarousel);
            $('#slider').flexslider(optionSlider);

        }

        function getEarringsColor() {
            var erColor = EarringsColor[0];
            var text = '';
            for (var i = 0; i < erColor.length; i++) {
                text += '<img class="er-color" src="' + erColor[i].ColorImgName + '" style="width: 24px; padding: 2px 2px 2px 2px; cursor: pointer;" title="' + erColor[i].ColorName + '" color_code="' + erColor[i].ColorCode + '" />';               
            }
            $('#er-color').html(text);
        }

        $(document).on('click', '.er-color', function () {
            var er_code = $('#txt-product-code').val();
            var color_code = $(this).attr('color_code');
            $.ajax({
                type: "POST",
                dataType: "json",
                crossDomain: true,
                url: "http://localhost:49331/WSRestFul.asmx/GetDataEarringsByModel",
                data: { er_code: er_code, color_code: color_code }
            }) //ajax
            .done(function (data) {
                Toast.init({
                    "selector": ".alert-success"
                });
                Toast.show("<strong>แสดงข้อมูล ต่างหูคู่ใหม่</strong>");
                getEarringsData(data[0]);
            }) //done
            .fail(function (data) {
                bootbox.dialog({
                    title: 'Fatal Error',
                    message: '<div class="alert alert-danger" role="alert"><strong>Error in connection !!!</strong></div>'
                });//boobox
            }); //fail
        });

        function getEarringsData(data) {
            var er = undefined;
            if (typeof data != 'undefined') {
                er = data;
            } else {
                er = Earrings[0][0];
            }
            var htmlText = '';
            if (er.ERImage != '') {
                htmlText += '<li><img src="' + er.ERImage + '" class="thumbnail" /></li>';
            }
            if (er.ERImageSide != '') {
                htmlText += '<li><img src="' + er.ERImageSide + '" class="thumbnail"  /></li>';
            }
            if (er.ERImageSize != '') {
                htmlText += '<li><img src="' + er.ERImageSize + '" class="thumbnail"  /></li>';
            }
            if (er.ERImageSample != '') {
                htmlText += '<li><img src="' + er.ERImageSample + '" class="thumbnail"  /></li>';
            }
            $('#the-carousel').html(htmlText);
            $('#the-slider').html(htmlText);
            $('#product-name').html(er.ERName);
            $('#product-price').html(Number(er.ERPrice).formatMoney() + ' บาท');
            $('#txt-product-price').val(er.ERPrice);

            var txtClass = '';
            if (er.ERStatus === 'รอประกอบ') {
                txtClass = 'text-danger';
            } else {
                txtClass = 'text-success';
            }

            $('#earring-status').html(er.ERStatus);
            $('#earring-status').addClass(txtClass);
            $('#product-detail').html(er.ERDetail);
            $('#txt-product-code').val(er.ERCode);

            setCarousel();
        }

        var btnBuyNow = document.getElementById('btn-buy-now');
        btnBuyNow.onclick = function () {
            var er_code = document.getElementById('txt-product-code').value;
            var qty = document.getElementById('txt-product-qty').value;
            //call ajax
            $.ajax({
                type: "POST",
                dataType: "json",
                crossDomain: true,
                url: "http://localhost:49331/WSRestFul.asmx/RecalQty",
                data: { ERCode: er_code, Qty: qty }
            }) //ajax
            .done(function (data) {
                Toast.init({
                    "selector": ".alert-success"
                });
                Toast.show("<strong>" + $('#product-name').html() + "</strong><br>เพิ่มเข้าตะกร้าสินค้าของท่านแล้ว");

                var tmp = parseInt($('span.badge').html());
                tmp += parseInt($('#txt-product-qty').val());
                $('span.badge').html(tmp);
            }) //done
            .fail(function (data) {
                bootbox.dialog({
                    title: 'Fatal Error',
                    message: '<div class="alert alert-danger" role="alert"><strong>Error in connection !!!</strong></div>'
                });//boobox
            }); //fail
        }

    </script>

</body>
</html>
